<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/4/23
 * Time: 12:00
 */
-->
<template>
  <div class="comment-editor">
    <div class="ce-wrapper">
      <textarea class="ce-editor" v-model="value"></textarea>
      <div class="ce-footer">
        <el-button type="primary" size="medium" round @click="onClick">留言</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommentEditor",
  props: {},
  data() {
    return {
      value: ''
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    onClick() {
      if (this.value) {
        this.$emit('click', this.value);
        this.value = '';
      }
    }
  },
  watch: {
    // 限制字数
    value(to) {
      this.value = to.substr(0, 512);
    }
  }
}
</script>

<style lang="less">
.comment-editor {
  padding: 12px 0;

  .ce-wrapper {
    .ce-editor {
      border: none;
      width: 100%;
      border-radius: 12px;
      height: 100px;
      overflow-y: auto;
      resize: none;
      padding: 12px 16px;
      box-sizing: border-box;
      background-color: #F5F5F6;
      outline: none;
    }

    .ce-footer {
      margin-top: 12px;
      text-align: right;
    }
  }
}
</style>